


        main{
            overflow: hidden;
        }
        main *{
            color: #1d1e2c;
        }
        
        .switch .contn .txt .ttl{
            height: 5px;
        }
        
        .tips.switch .contn .name{
            font-size: 11px;
            color: #acadbd;
            top: 70px;
            left: 50%;
            transform: translateX(-50%);
        }
        .tips.switch .contn .txt{
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            padding: 100px 0px;
            opacity: 0;
            text-align: center;
            overflow: visible;
        }
        .tips.switch.active .contn .txt{
            opacity: 1;
            transition: all ease 1s .5s;
        }
        .tips.switch .contn .txt>p{
            font-size: 30px;
            line-height: 40px;
            margin-top: 20px;
        }
        .tips.switch .contn .txt .mark{
            display: block;
            margin-top: 40px;
            line-height: 64px;
        }
        .tips.switch .contn .txt .tip{
            position: relative;
            overflow: initial;
            max-width: 100%;
        }
        .tips.switch .contn .txt .tip:before{
            content: '';
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 65px;
            height: 5px;
            background: #1d1e2c;        
        }
        .tips.switch .contn .txt:after{
            content: '';
            position: absolute;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%);
            width: 1px;
            height: 0;
            background: #acadbd;
            opacity: 0;
            bottom: 100px;
        }
        .tips.switch.active .txt:after{
            transition: height 1s 1s ease, 
                        bottom 1s 1s ease, 
                        opacity .3s linear;
            height: 100px;
            bottom: 0;
            opacity: 1;
        }

        .intro.switch .txt{
            top: 32%;
            left: 50%;
            z-index: 3;
        }
        .intro.switch .txt .t{
            font-size: 18px;
            line-height: 25px;
            max-width: 600px;
            padding-top: 100px;
            opacity: 0;
            color: #666;
            transition: all .5s ease;
        }   
        .intro.switch.active .txt .t{
            opacity: 1;
            transition-delay: 2s;
        }
        .intro.switch .pic{
            left: 50%;
            margin-left: 75px;
            top: 6%;
            box-shadow: 0 25px 45px rgba(0,0,0,0.25);
        }
        .intro.switch.active .pic .picBox{
            height: 820px;
        }
        .intro.switch .pic + .pic{
            top: 16%;
            left: 50%;
            transform: translateX(-300px);
        }
        .intro.switch .pic + .pic .picBox{
            width: 450px;
            
        }
        .intro.switch.active .pic + .pic .picBox{
            height: 260px;
        }

        .swiper.switch{
            border-width: 0px !important;
        }
        .swiper.switch .aboutSwiper{
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
        }
        .swiper.switch.active{
            transition: initial;
            z-index: 1;
            opacity: 1;
            transform: initial;
        }
        .swiper.switch.leave .contn{
            transform: initial;
            filter: initial;
            opacity: 0;
            transition: all .5s ease;
        }
        .swiper.switch.active + .switch{
            transform: scale(.9);
        }
        .swiper.switch .contn .btn,
        .swiper.switch .contn .loc{
            position: absolute !important;
        }
        .swiper.switch .contn .loc{
            left: 25px !important;
            bottom: 12px !important;
        }
        .swiper.switch .contn .btn{
            top: 50% !important;
            transform: translateY(-50%) !important;
        }
        .swiper.switch .contn .btn.prev{
            left: 0px !important;
        }
        .swiper.switch .contn .btn.next{
            right: 0px !important;
        }

        .history.switch .txt{
            top: 50%;
            left: 50%;
            transform: translate(75px,-50%);
        }
        .history.active.switch .contn .txt .ttl{
            transition: transform .5s .5s ease-in, 
                        opacity .3s .5s ease, 
                        max-width .5s 1.5s ease-in;
        }
        .history.switch.active .txt .tip{
            transition: all 1s .5s ease-out;
        }
        .history.switch.active .tip{
            width: 500px;
        }
        .history.switch .txt .tip p span{
            font-weight: lighter;
            color: #666;
        }
        .history.switch .pic{
            top: 50%;
            left: 50%;
            max-width: 0;
            transform: translate(0, -50%);
            overflow: hidden;
        }
        .history.switch.active .pic{
            transform: translate(-600px, -50%);
            max-width: 600px;
            transition: all 2s 0.5s cubic-bezier(0.12, 0.335, 0.01, 0.985);
        }
        .history.switch .contn .pic .picBox{
            height: 340px;
            opacity: 1;
        }
        .history.active.switch .contn .txt a{
            transition-delay: 1s;
        }

        footer{
            color: #abacbc;
        }


        @media (max-width:1600px){
            .tips.switch .contn .txt{
                padding: 70px 0px;
            }
            .tips.switch .contn .txt>p{
                font-size: 22px;
                line-height: 30px;
            }
            .tips.switch .contn .txt .mark img{
                width: 40px;
            }

            .intro.switch .txt .t{
                font-size: 12px;
                padding-top: 10px;
                max-width: 480px;
            }
            .intro.switch.active .pic .picBox{
                width: 400px;
            }
            .intro.switch.active .pic .picBox{
                height: 550px;
            }
            .intro.switch.active .pic + .pic .picBox{
                height: 195px;
            }
            
            .history.switch.active .txt{
                transform: translate(60px,-50%);
            }
            .history.switch.active .pic{            
                max-width: 455px;
                transform: translate(-460px, -50%);
            }
            .history.switch .contn .pic .picBox{
                width: 450px;
            }
        }
        @media(min-width:1025px){
            .switch .loc ul li .preview{
                display: none;
            }
        }
        @media(max-width:1024px){
            .tips.switch.frozen .txt:after{
                transition: height 1s 1s ease, 
                            bottom 1s 1s ease, 
                            opacity .3s linear;
                height: 100px;
                bottom: 0;
                opacity: 1;
            }
            .tips.switch.frozen .contn .txt{
                opacity: 1;
                transition: all ease 1s .5s;
            }

            .intro.switch.frozen .txt .t {
                opacity: 1;
                transition-delay: 2s;
            }
            .intro.switch .pic{
                margin-top: -600px;
                margin-left: 415px;
            }
            .intro.switch.frozen .pic .picBox{
                height: 500px;
            }
            .intro.switch .pic + .pic{
                margin-top: -100px;
                margin-left: 300px;
                width: 340px;
            }
            .intro.switch.frozen .pic + .pic .picBox{
                height: 195px;
            }
            .intro.switch .txt .t{
                max-width: 280px;
                font-size: 15px;
                line-height: 25px;
            }
            .intro.switch.frozen .txt .t{
                opacity: 1;
                transition-delay: 2s;
            }

            .swiper.switch{
                height: 100vh;
            }
            .swiper.switch .contn{
                max-width: 100%;
                padding: 0px;
            }
            .switch .loc ul li:hover .preview{
                height: 60px;
            }

            .history.switch.frozen .contn .txt .ttl{
                transition: transform .5s .5s ease-in, 
                            opacity .3s .5s ease, 
                            max-width .5s 1.5s ease-in;
            }
            .history.switch.frozen .txt .tip{
                transition: all 1s .5s ease-out;
            }
            .history.switch .pic{
                margin-top: 50px;
            }
            .history.switch.frozen .pic{
                max-width: 100%;
                transition: all 2s 0.5s cubic-bezier(0.12, 0.335, 0.01, 0.985);
            }
            .history.switch .pic .picBox{
                width: 600px;
                height: 340px;
            }
        }

        @media(max-width:767px){
            .intro.switch .txt .t{
                max-width: 380px;
                opacity: 1;
            }
            .intro.switch .pic + .pic{
                width: 100%;
            }
            .swiper.switch{
                height: 50vh;
            }
            .history.switch .pic{
                max-width: 100%;
            }
            .history.switch .links{
                display: block;
            }
            .switch .contn .txt a + a{
                margin-left: 0px;
                margin-top: 15px;
            }
        }